import React, { useEffect, useState,useCallback } from 'react'
import { useSelector,useDispatch } from'react-redux'
import { useHistory } from 'react-router-dom'

import Button from '@/components/button/Button'
import doctorImg from '@/assets/image/teamHome.png'
import {loadDataUserSaga,loadDataUserDoctorSaga} from './store/actionCreator'
import {MyTeamWrapper} from './styledHome'

export default function MyTeam() {
    const [ signTeam, setSignTeam ] = useState(false)
    const user = useSelector(state => {
        return state.getIn(['Home','user'])
    })
    const userDoctor = useSelector(state => {
        return state.getIn(['Home','userDoctor'])
    })
    const dispath = useDispatch()
    useEffect(() => {
        (async () => {
            await dispath(loadDataUserSaga())
        })()
    },[dispath])

    //判断是否签约团队
    useEffect(() => {
        if(user.doctorTeamid){
            setSignTeam(true)
            dispath(loadDataUserDoctorSaga({"id":user.doctorTeamid}))
        }
    },[user,setSignTeam,dispath])

    const history = useHistory()
    const tolist = useCallback(() => {
        history.push('/home/hospitallist')
    },[history])

    return (
        <MyTeamWrapper>
            <div className='title'>
                我的签约团队
            </div>
            <div className='center'>
                {
                    signTeam ? (
                        <div className='doctorTeam'>
                            <img src={doctorImg} alt="" />
                            <div className='teamname'>{userDoctor.name}</div>
                            <div className='teaminfo'>
                                {userDoctor.info}
                            </div>
                            <Button
                            size = 'mini'
                            bgColor= '#2984F8'
                            text = '申请服务'
                            ></Button>
                        </div>
                    ):(
                        <Button
                        size = 'mini'
                        bgColor= '#2984F8'
                        text = '点击签约团队'
                        click = {tolist}
                        ></Button>
                    )
                }

            </div>
        </MyTeamWrapper>
    )
}
